<template>
  <div>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="form-label">
          <span>任务名称</span><span class="required-mark">*</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-input v-model="info.name" class="form-input" placeholder="请输入任务名称" size="small" maxlength="50"
                  show-word-limit @change="handleChange"></el-input>
      </el-col>
      <el-col :span="3">
        <div class="form-label">
          <span>是否支持自建</span><span class="required-mark">*</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-switch v-model="info.selfAdd" class="form-switch" @change="handleChange"></el-switch>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="form-label">
          <span>所属知识体系</span><span class="required-mark">*</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-select v-model="info.system" class="form-input" placeholder="请选择知识体系" size="small"
                   @change="handleSystemChange">
          <el-option v-for="item in systemOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <div class="form-label">
          <span>所属知识库</span><span class="required-mark">*</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-select v-if="info.system === 'knowledge'" v-model="info.lib" class="form-input"
                   filterable placeholder="请选择所属知识库" size="small" @change="handleLibChange">
          <el-option v-for="item in $store.state.knowledgeLibList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>
        </el-select>
        <el-select v-else :disabled="true" class="form-input" placeholder="请选择所属知识库" size="small" value></el-select>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="form-label">
          <span>开始结束日期</span><span class="required-mark">*</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-date-picker v-model="info.dateRange" class="form-input" end-placeholder="结束日期" range-separator="至"
                        size="small" start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd"
                        @change="handleChange">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="form-label">
          <span>审核级别</span><span class="required-mark">*</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-radio-group v-model="info.reviewLevel" style="height: 32px; vertical-align: sub;" @change="handleChange">
          <el-radio :label="1">初审</el-radio>
          <el-radio :label="2">复审</el-radio>
          <el-radio :label="3">终审</el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span="3">
        <div class="form-label">
          <span>上传附件</span><span>&nbsp;</span>
        </div>
      </el-col>
      <el-col :span="8">
        <el-upload :on-remove="handleRemove" :on-success="handleSuccess" action="/pmph/action/task/uploadTaskFile"
                   multiple :file-list="info.fileList" :before-upload="handleBeforeUpload">
          <el-button size="small" type="primary">上传附件</el-button>
        </el-upload>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="3">
        <div class="form-label">
          <span>备注信息</span><span>&nbsp;</span>
        </div>
      </el-col>
      <el-col :span="9">
        <el-input v-model="info.comment" class="form-input" placeholder="请输入备注信息" size="small" maxlength="100"
                  show-word-limit @change="handleChange"></el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BasicInfo",
  props: {
    value: Object
  },
  data() {
    return {
      info: {
        name: "",
        selfAdd: false,
        system: undefined,
        lib: undefined,
        libName: "",
        dateRange: [],
        reviewLevel: 0,
        fileList: [],
        comment: ""
      },
      systemOptions: [],
      disableLibSelection: true,
      fileList: []
    }
  },
  methods: {
    handleChange() {
      this.$emit("input", this.info)
    },
    updateSystemOptions() {
      this.axios.get("/pmph/action/task/selectSystemOptions").then((res) => {
        this.systemOptions = res.data
      })
    },
    handleSystemChange(value) {
      if (value === "knowledge") {
        this.disableLibSelection = false
        this.info.lib = undefined
        this.info.libName = ""
      } else if (value === "calc") {
        this.info.lib = CONST.KNOWLEDGE_LIB.CALCULATOR_LIB_ID
        this.disableLibSelection = true
      } else if (value === "flowchart") {
        this.info.lib = CONST.KNOWLEDGE_LIB.FLOW_CHART_LIB_ID
        this.disableLibSelection = true
      }
      this.handleChange()
    },
    handleRemove(file) {
      if (file && file.status === "success") {
        this.axios.get("/pmph/action/task/removeTempFile", {
          params: {
            name: file.name
          }
        }).then(() => {
          let index = this.info.fileList.findIndex(obj => obj.name === file.name)
          this.info.fileList.splice(index, 1)
        })
      }
    },
    handleSuccess(response) {
      this.info.fileList.push(response.data)
      this.handleChange()
    },
    handleLibChange(val) {
      if (val === undefined) return
      this.info.libName = UTIL.getNameById(this.$store.state.knowledgeLibList, val)
      this.handleChange()
    },
    handleBeforeUpload(file) {
      if (file.size > 50000000) {
        this.$message.warning("上传文件大小不可以超过50M")
        return false
      }
      let itemWithTheSameName = this.info.fileList.find(item => item.name === file.name)
      if (itemWithTheSameName === undefined) {
        return true
      }
      this.$message.warning("附件名称重复")
      return false
    }
  },
  created() {
    this.info = this.value
    this.updateSystemOptions()
  }
}
</script>

<style scoped>
.required-mark {
  color: red;
}

.form-label {
  float: right;
  height: 32px;
  line-height: 32px;
  margin-right: 10px;
}

.form-switch {
  height: 32px;
}

.form-input {
  width: 80%;
}

.bottom-space {
  margin-bottom: 10px;
}
</style>
